<template>
	<div class="header">
		<div class="header-logo">
			<img src="../../assets/logo.png" />
			<p>电商后台管理系统</p>
		</div>
		<zh-button color="gray" @click="loginOut">退出</zh-button>
	</div>
</template>

<script>
	export default {
		// 组件名称
		name: 'demo',
		// 组件方法
		methods: {
			// 退出登录
			loginOut() {
				this.$confirm('确定要退出吗', '退出登录', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// 清空token
					sessionStorage.clear('token');
					this.$router.push({
						name: "login"
					})
					this.$message.success('退出成功')
				}).catch(() => {
					this.$message.info('已取消退出')
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #373d41;
		padding: 0 20px;
		box-sizing: border-box;

		.header-logo {
			display: flex;
			align-items: center;

			img {
				background-color: #FFFFFF;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				margin-right: 10px;
			}

			p {
				color: #FFFFFF;
				font-size: 22px;
			}
		}
	}
</style>
